<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>JS Drum Kit</title>
		<link
			rel="stylesheet"
			href="style.css" />
		<link
			rel="icon"
			href="https://fav.farm/🔥" />
	</head>
	<body>
		<div class="keys">
			<div
				data-key="65"
				class="key">
				<kbd>A</kbd>
				<span class="sound">clap</span>
			</div>
			<div
				data-key="83"
				class="key">
				<kbd>S</kbd>
				<span class="sound">hihat</span>
			</div>
			<div
				data-key="68"
				class="key">
				<kbd>D</kbd>
				<span class="sound">kick</span>
			</div>
			<div
				data-key="70"
				class="key">
				<kbd>F</kbd>
				<span class="sound">openhat</span>
			</div>
			<div
				data-key="71"
				class="key">
				<kbd>G</kbd>
				<span class="sound">boom</span>
			</div>
			<div
				data-key="72"
				class="key">
				<kbd>H</kbd>
				<span class="sound">ride</span>
			</div>
			<div
				data-key="74"
				class="key">
				<kbd>J</kbd>
				<span class="sound">snare</span>
			</div>
			<div
				data-key="75"
				class="key">
				<kbd>K</kbd>
				<span class="sound">tom</span>
			</div>
			<div
				data-key="76"
				class="key">
				<kbd>L</kbd>
				<span class="sound">tink</span>
			</div>
		</div>

		<audio
			data-key="65"
			src="sounds/clap.wav"></audio>
		<audio
			data-key="83"
			src="sounds/hihat.wav"></audio>
		<audio
			data-key="68"
			src="sounds/kick.wav"></audio>
		<audio
			data-key="70"
			src="sounds/openhat.wav"></audio>
		<audio
			data-key="71"
			src="sounds/boom.wav"></audio>
		<audio
			data-key="72"
			src="sounds/ride.wav"></audio>
		<audio
			data-key="74"
			src="sounds/snare.wav"></audio>
		<audio
			data-key="75"
			src="sounds/tom.wav"></audio>
		<audio
			data-key="76"
			src="sounds/tink.wav"></audio>

		<script>
			function removeTransition(event) {
				if (event.propertyName !== 'transform') return;
				event.target.classList.remove('playing');
			}
			function playMusic(e) {
				let sound = document.querySelector(`audio[data-key="${e.keyCode}"]`);
				if (!sound) return;
				let key = document.querySelector(`div[data-key="${e.keyCode}"]`);
				key.classList.add('playing');
				sound.play();
			}
			let keys = document.querySelectorAll('.key');
			keys.forEach((key) => {
				key.addEventListener('transitionend', removeTransition);
			});
			window.addEventListener('keydown', playMusic);
		</script>
	</body>
</html>
